<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>交叉配血</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <style type="text/css">
        .el-dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0 !important;
            transform: translate(-50%, -50%);
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
            display: flex;
            flex-direction: column;
        }

        .el-dialog__body {
            overflow: auto;
        }
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>

<body>
<div class="data-manage-table">
    <template>
<!--        搜索条件-->
        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
            <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
            <el-form-item label="配血单号">
                <el-input style="width:195px"placeholder="请输入配血单号" v-model="searchSample.number"></el-input>
            </el-form-item>
            <el-form-item label="检验单号">
                <el-input style="width:195px"placeholder="请输入检验单号" v-model="searchSample.inspectionSheet"></el-input>
            </el-form-item>
            <el-form-item label="患者病历号">
                <el-input style="width:195px" placeholder="请输入病历号" v-model="searchSample.medicalRecordNumber"></el-input>
            </el-form-item>
            <el-form-item label="患者姓名">
                <el-input style="width:195px" placeholder="请输入患者姓名" v-model="searchSample.name"></el-input>
            </el-form-item>
            <el-form-item label="患者血样编号">
                <el-input style="width:195px" placeholder="请输入患者血样编号"
                          v-model="searchSample.bloodSampleNumber"></el-input>
            </el-form-item>
            <el-form-item label="血液样本编号">
                <el-input style="width:195px" placeholder="请输入血液样本编号" v-model="searchSample.bloodNumber"></el-input>
            </el-form-item>
            <el-form-item label="配血方法" prop="dispenseMethod">
                <el-select style="width: 195px;"v-model="searchSample.dispenseMethod" filterable placeholder="请选择">
                    <el-option  v-for="item in dispenseMethodsList"
                                :key="item.value" :label="item.name"
                                :value="item.code"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="配血基本信息登记人" prop="dispenseRegister">
                <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人" v-model="searchSample.dispenseRegister"></el-input>
            </el-form-item>
            <el-form-item label="配血基本信息登记人工号" prop="dispenseRegisterNumber">
                <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="searchSample.dispenseRegisterNumber"></el-input>
            </el-form-item>
            <el-form-item label="配血基本信息登记时间" prop="dispenseRegisterTime">
                <el-date-picker v-model="searchSample.dispenseRegisterTime" type="datetimerange" size="small"
                                format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="配血人工号" prop="dispensePeopleNumber">
                <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="searchSample.dispensePeopleNumber"></el-input>
            </el-form-item>
            <el-form-item label="配血人" prop="dispensePeople">
                <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="searchSample.dispensePeople"></el-input>
            </el-form-item>
            <el-form-item label="配血时间" prop="dispenseTime">
                <el-date-picker v-model="searchSample.dispenseTime" type="datetimerange" size="small"
                                format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结果审核人工号" prop="reviewerNumber">
                <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="searchSample.reviewerNumber"></el-input>
            </el-form-item>
            <el-form-item label="审核人" prop="reviewerName">
                <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="searchSample.reviewerName"></el-input>
            </el-form-item>

            <el-form-item label="结果审核时间" prop="reviewTime">
                <el-date-picker v-model="searchSample.reviewTime" type="datetimerange" size="small"
                                format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>


            <el-form-item label="状态" prop="state">
                <el-select v-model="searchSample.statue">
                    <el-option v-for="item in dispenseStatesList" :label="item.name"
                               :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="info" @click="clear">清空</el-button>
                <el-button type="primary" @click="handleAdd()">交叉配血登记</el-button>
                <el-button type="primary" @click="addResult()">交叉配血结果登记</el-button>
                <el-button type="primary" @click="exportExcel()">导出</el-button>
                <el-button type="primary">打印</el-button>
                <el-button  @click="batchDelete()" type="danger" style="margin-right: 40px;">批量删除</el-button>
            </el-form-item>
        </el-form>
<!--配血基本信息登记-->
        <el-dialog title="交叉配血登记" center :visible.sync="dialogVisible" width="40%" :lock-scroll=true>
            <el-form ref="form" :model="addForm" :rules="addFormRules" label-width="200px">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="检验单号" prop="inspectionSheet">
                        <el-input style="width: 195px;" placeholder="请输入检验单号"
                                  v-model="addForm.inspectionSheet"@change="getInformation"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="病历号" prop="medicalRecordNumber">
                        <el-input  disabled style="width: 195px;" placeholder="请输入病历号"
                                   v-model="addForm.medicalRecordNumber"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="患者姓名" prop="name">
                        <el-input  disabled style="width: 195px;" placeholder="请输入患者姓名" v-model="addForm.name"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="受血者abo血型" prop="bloodType">
                        <el-select disabled  style="width: 195px;"v-model="addForm.bloodType">
                            <el-option v-for="item in aboTypeList" :key="item.name" :label="item.name"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="受血者Rhd血型" prop="rhd">
                        <el-select disabled  style="width: 195px;"v-model="addForm.rhd">
                            <el-option v-for="item in rhTypeList" :key="item.name" :label="item.name"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="患者血样编号"prop="bloodSampleNumber">
                        <el-input disabled style="width: 195px;"placeholder="请输入患者血样编号"
                                  v-model="addForm.bloodSampleNumber" ></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="配血方法" prop="dispenseMethod">
                        <el-select style="width: 195px;"v-model="addForm.dispenseMethod" filterable
                                   placeholder="请选择" @change="returnDispenseCost">
                            <el-option v-for="item in dispenseMethodsList"  :label="item.name"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="费用" prop="cost">
                        <el-select disabled style="width: 195px;"v-model="addForm.cost" filterable
                                   placeholder="请选择" >
                            <el-option v-for="item in dispenseMethodsList"  :label="item.cost"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="配血基本信息登记人工号" prop="dispenseRegisterNumber">
                        <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="addForm.dispenseRegisterNumber"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="配血基本信息登记人" prop="dispenseRegister">
                        <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人" v-model="addForm.dispenseRegister"></el-input>
                    </el-descriptions-item>
                </el-descriptions>

            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="addSave()">确 定</el-button>
                </span>
        </el-dialog>

<!--        交叉配血结果录入-->
        <el-dialog title="交叉配血结果登记" center :visible.sync="resultVisible" width="20%">

            <el-form ref="form" :model="addForm" :rules="addFormRules" label-width="200px">

                <el-descriptions :column="1" border>
                    <el-descriptions-item label="配血人工号" prop="dispensePeopleNumber">
                        <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="addForm.dispensePeopleNumber"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="配血人" prop="dispensePeople">
                        <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="addForm.dispensePeople"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="主侧结果" prop="mainSideResult">
                        <el-select style="width: 195px;"v-model="addForm.mainSideResult" filterable placeholder="请选择">
                            <el-option  v-for="item in dispenseResultsList"
                                        :label="item.name"
                                        :value="item.code"></el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="次侧结果" prop="primarySideResult">
                        <el-select style="width: 195px;"v-model="addForm.primarySideResult" filterable placeholder="请选择">
                            <el-option  v-for="item in dispenseResultsList"
                                        :label="item.name"
                                        :value="item.code"></el-option>
                        </el-select>
                    </el-descriptions-item>

                </el-descriptions>

            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="saveResult()">确 定</el-button>
                </span>
        </el-dialog>

<!--        修改配血信息-->
        <el-dialog :title="titleName" center :visible.sync="editVisible" width="40%">
            <el-form ref="form" :V-model="addForm" :rules="addFormRules" label-width="200px">
                <el-descriptions  :column="2" border>
                    <el-descriptions-item label="配血单号">{{addForm.number}}</el-descriptions-item>
                    <el-descriptions-item label="检验单号">{{addForm.inspectionSheet}}</el-descriptions-item>
                    <el-descriptions-item label="病历号">{{addForm.medicalRecordNumber}}</el-descriptions-item>
                    <el-descriptions-item label="患者姓名">{{addForm.name}}</el-descriptions-item>
                    <el-descriptions-item label="受血者abo血型">{{getAbo(addForm.bloodType)}}</el-descriptions-item>
                    <el-descriptions-item label="受血者Rhd血型">{{getRh(addForm.rhd)}}</el-descriptions-item>
                    <el-descriptions-item label="患者血样编号">{{addForm.bloodSampleNumber}}</el-descriptions-item>
                    <el-descriptions-item label="血液样本编号">{{addForm.bloodNumber}}</el-descriptions-item>
                    <el-descriptions-item label="供血者血液成分">{{ getBloodComposition(addForm.bloodComponent)}}</el-descriptions-item>
                    <el-descriptions-item label="供血者abo血型">{{getAbo(addForm.aboBloodType)}}</el-descriptions-item>
                    <el-descriptions-item label="供血者rh血型">{{getRh(addForm.rhBloodType)}}</el-descriptions-item>
                    <el-descriptions-item >

                    </el-descriptions-item>
                    <el-descriptions-item label="配血方法" prop="dispenseMethod">
                        <el-select style="width: 195px;"v-model="addForm.dispenseMethod" filterable placeholder="请选择"@change="returnDispenseCost">
                        <el-option  v-for="item in dispenseMethodsList"
                                    :label="item.name"
                                    :value="item.code"></el-option>
                    </el-select>
                    </el-descriptions-item>

                    <el-descriptions-item label="费用" prop="cost">
                        <el-select disabled style="width: 195px;"v-model="addForm.cost" filterable
                                   placeholder="请选择" >
                            <el-option v-for="item in dispenseMethodsList"  :label="item.cost"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="配血基本信息登记人工号" prop="dispenseRegisterNumber">
                        <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="addForm.dispenseRegisterNumber"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="配血基本信息登记人" prop="dispenseRegister">
                        <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人" v-model="addForm.dispenseRegister"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="配血人工号" prop="dispensePeopleNumber">
                        <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="addForm.dispensePeopleNumber"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="配血人" prop="dispensePeople">
                        <el-input style="width: 195px;"placeholder="请输入配血基本信息登记人工号" v-model="addForm.dispensePeople"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="主侧结果" prop="mainSideResult">
                        <el-select style="width: 195px;"v-model="addForm.mainSideResult" filterable placeholder="请选择">
                            <el-option  v-for="item in dispenseResultsList"
                                        :label="item.name"
                                        :value="item.code"></el-option>
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="次侧结果" prop="mainSideResult">
                        <el-select style="width: 195px;"v-model="addForm.primarySideResult" filterable placeholder="请选择">
                            <el-option  v-for="item in dispenseResultsList"
                                        :label="item.name"
                                        :value="item.code"></el-option>
                        </el-select>
                    </el-descriptions-item>

                </el-descriptions>

            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                        <el-button @click="cancel()">取 消</el-button>
                        <el-button type="primary" @click="editSave">确 定</el-button>
                </span>
        </el-dialog>

<!--        更换血液-->
        <el-dialog title="更换血液" center :visible.sync="changeBloodVisible" width="40%">

            <el-descriptions title="血液信息"  :column="2" border>
                <el-descriptions-item label="血液ID">{{changeBloodForm.bloodId}}</el-descriptions-item>
                <el-descriptions-item label="血液样本编号">{{changeBloodForm.bloodNumber}}</el-descriptions-item>
                <el-descriptions-item label="abo血型">{{getAbo(changeBloodForm.aboBloodType)}}</el-descriptions-item>
                <el-descriptions-item label="Rhd血型">{{getRh(changeBloodForm.rhBloodType)}}</el-descriptions-item>
                <el-descriptions-item label="血液成分">{{ getBloodComposition(changeBloodForm.bloodComponent)}}</el-descriptions-item>
                <el-descriptions-item label="规格/血量">{{getBloodSize(changeBloodForm.bloodCount)}}</el-descriptions-item>
                <el-descriptions-item label="失效时间">{{changeBloodForm.failureTime}}</el-descriptions-item>
                <el-descriptions-item label="血液状态">{{getBloodInformationState(changeBloodForm.state)}}</el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="cancel()">取 消</el-button>
                        <el-button type="primary" @click="changeBlood">确定换血</el-button>
                </span>
        </el-dialog>


<!--        显示表格-->
        <template>
            <el-table :data="tableData" style="width: 100%"border
                      ref="multipleTable"
                      :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row fit>
                <el-table-column type="selection" width="55" align="center" ></el-table-column>

                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left"  label-width="auto" class="demo-table-expand">
                            <el-form-item label="配血单号:">
                                <span>{{ props.row.number }}</span>
                            </el-form-item>
                            <el-form-item label="患者病例号:" >
                                <span>{{ props.row.medicalRecordNumber }}</span>
                            </el-form-item>
                            <el-form-item label="患者姓名:">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="患者血样编号:">
                                <span>{{ props.row.bloodSampleNumber }}</span>
                            </el-form-item>
                            <el-form-item label="血液样本编号:">
                                <span>{{ props.row.bloodNumber }}</span>
                            </el-form-item>
                            <el-form-item label="受血者abo血型:">
                                <span>{{ getAbo(props.row.bloodType) }}</span>
                            </el-form-item>
                            <el-form-item label="受血者rh血型:">
                                <span>{{ getRh(props.row.rhd) }}</span>
                            </el-form-item>
                            <el-form-item label="供血者abo血型:">
                                <span>{{ getAbo(props.row.aboBloodType) }}</span>
                            </el-form-item>
                            <el-form-item label="供血者rh血型:">
                                <span>{{ getRh(props.row.rhBloodType) }}</span>
                            </el-form-item>
                            <el-form-item label="供血者血液成分:">
                                <span>{{ getBloodComposition(props.row.bloodComponent)}}</span>
                            </el-form-item>
                            <el-form-item label="配血方法:">
                                <span>{{ getDispenseMethod(props.row.dispenseMethod)}}</span>
                            </el-form-item>
                            <el-form-item label="配血费用:">
                                <span>{{ getDispenseCost(props.row.cost)}}</span>
                            </el-form-item>
                            <el-form-item label="配血基本信息登记人工号:">
                                <span>{{ props.row.dispenseRegisterNumber }}</span>
                            </el-form-item>
                            <el-form-item label="配血基本信息登记人:">
                                <span>{{ props.row.dispenseRegister }}</span>
                            </el-form-item>
                            <el-form-item label="配血人工号:">
                                <span>{{ props.row.dispensePeopleNumber }}</span>
                            </el-form-item>
                            <el-form-item label="配血人:">
                                <span>{{ props.row.dispensePeople }}</span>
                            </el-form-item>
                            <el-form-item label="主侧结果:">
                                <span>{{ getDispenseResult(props.row.mainSideResult)}}</span>
                            </el-form-item>
                            <el-form-item label="次侧结果:">
                            <span>{{ getDispenseResult(props.row.primarySideResult)}}</span>
                        </el-form-item>
                            <el-form-item label="配血状态:">
                            <span>{{ getDispenseState(props.row.statue)}}</span>
                        </el-form-item>
                        </el-form>
                    </template>

                </el-table-column>
                </el-table-column>
                <el-table-column prop="number" label="配血单号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="inspectionSheet" label="检验单号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="medicalRecordNumber" label="患者病例号" width="160" align="center">
                </el-table-column>
                <el-table-column prop="name" label="患者姓名" width="120" align="center">
                </el-table-column>
                <el-table-column prop="bloodType" label="受血者abo血型" width="100" align="center">
                    <template slot-scope="scope">{{ getAbo(scope.row.bloodType) }}</template>
                </el-table-column>
                <el-table-column prop="rhd" label="受血者rh(d)血型" width="80" align="center">
                    <template slot-scope="scope">{{ getRh(scope.row.rhd) }}</template>
                </el-table-column>
                <el-table-column prop="bloodSampleNumber" label="患者血样编号" width="160" align="center">
                </el-table-column>
                <el-table-column prop="bloodNumber" label="血液样本编号" width="80" align="center">
                </el-table-column>
                <el-table-column prop="aboBloodType" label="供血者abo血型" width="100" align="center">
                    <template slot-scope="scope">{{ getAbo(scope.row.aboBloodType)}}</template>
                </el-table-column>
                <el-table-column prop="rhBloodType" label="供血者rh(d)血型" width="80" align="center">
                    <template slot-scope="scope">{{ getRh(scope.row.rhBloodType)}}</template>

                </el-table-column>
                <el-table-column prop="bloodComponent" label="供血者血液成分" width="140" align="center">
                    <template slot-scope="scope">{{ getBloodComposition(scope.row.bloodComponent)}}</template>
                </el-table-column>
                <el-table-column prop="dispenseMethod" label="配血方法" width="80" align="center">
                    <template slot-scope="scope">{{ getDispenseMethod(scope.row.dispenseMethod)}}</template>
                </el-table-column>
                <el-table-column prop="cost" label="配血费用" width="80" align="center">
                    <template slot-scope="scope">{{ getDispenseCost(scope.row.cost)}}</template>
                </el-table-column>
                <el-table-column prop="dispenseRegisterNumber" label="配血基本信息登记人工号" width="180" align="center">
                </el-table-column>
                <el-table-column prop="dispenseRegister" label="配血基本信息登记人" width="150" align="center">
                </el-table-column>
                <el-table-column prop="dispenseRegisterTime" label="配血基本信息登记时间" width="220" align="center":formatter="formatDate">
                </el-table-column>
                <el-table-column prop="statue" label="状态" width="100" align="center">
                    <template slot-scope="scope">{{ getDispenseState(scope.row.statue)}}</template>
                </el-table-column>
                <el-table-column prop="dispenseTime" label="配血时间" width="220" align="center":formatter="formatDate">
                </el-table-column>
                <el-table-column prop="dispensePeopleNumber" label="配血人工号" width="110" align="center">
                </el-table-column>
                <el-table-column prop="dispensePeople" label="配血人" width="80" align="center">
                </el-table-column>
                <el-table-column prop="mainSideResult" label="主侧结果" width="100" align="center">
                    <template slot-scope="scope">{{ getDispenseResult(scope.row.mainSideResult)}}</template>

                </el-table-column>
                <el-table-column prop="primarySideResult" label="次侧结果" width="100" align="center">
                    <template slot-scope="scope">{{ getDispenseResult(scope.row.primarySideResult)}}</template>
                </el-table-column>
                <el-table-column prop="reviewerNumber" label="审核人工号" width="110" align="center">
                </el-table-column>
                <el-table-column prop="reviewerName" label="结果审核人" width="110" align="center">
                </el-table-column>
                <el-table-column prop="reviewTime" label="审核时间" width="180" align="center":formatter="formatDate">
                </el-table-column>
                <el-table-column label="操作" width="400" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        <el-button size="mini" type="danger" @click="chickChangeBlood(scope.$index, scope.row)"
                                   :disabled="scope.row.statue == '7' ? false : true">换血
                        </el-button>
                        <el-button size="mini" type="danger" @click="hardDispense(scope.$index,scope.row)">疑难配血
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[5,10,15,20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    style="text-align: center; margin-top: 20px;"
                    :total="total">
            </el-pagination>
        </div>

    </template>
</div>
<script src="/js/vue.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/index.min.js"></script>-->
<!--<link href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.min.css" rel="stylesheet">-->
<script src="/js/2.15.12/index.js"></script>
<link href="/css/2.15.12/index.min.css" rel="stylesheet">

<script src="/plugins/axios-0.27.2/axios.min.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/httpVueLoader.js"></script>

<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script language="JavaScript" type="text/javascript">
    //Date原型上添加格式转换方法
    Date.prototype.format = function(fmt) {
        const o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(const k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
</script>
<script>

    (function () {
            var vm = window.vm = new Vue({
                el: '.data-manage-table',

                data() {
                    var checkName = (rule, value, callback) => {
                        if (!value) {
                            return callback(new Error('请输入中文'))
                        }
                        if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
                            callback(new Error('不可输入特殊字符'))
                        } else {
                            callback()
                        }
                    };
                    return {
                        user:{
                            "username":"",
                            "jobnum":"",
                        },
                        titleName:"修改交叉配血信息",
                        //弹出框显示
                        dialogVisible: false,
                        editVisible:false,
                        resultVisible:false,
                        reviewVisible:false,
                        changeBloodVisible:false,
                        changeBloodVisible:false,
                        edit:false,
                        current:1,//当前页
                        total:0,//总记录数
                        pageSize:5,//每页记录数
                        pages:0,//总页数

                        //血液信息分页数据
                        bloodCurrent:1,
                        bloodTotal:0,
                        bloodPageSize:5,
                        bloodPages:0,
                        // 血液样本编号选项
                        bloodNumberList:[],
                        //配血状态列表
                        dispenseStatesList:[],
                        //血液成分列表
                        bloodCompositionList:[],
                        //血液状态列表
                        bloodStateList:[],
                        //搜索血液基本信息
                        searchBloodInformation:{
                            aboBloodType:'',
                            rhBloodType:'',
                            state:'',
                            bloodComponent:'',
                            id:'',
                        },

                        //搜索配血样本信息
                        searchSample: {
                            number: '',  //配血单号
                            medicalRecordNumber: '',//病历号
                            name:'',//患者姓名
                            inspectionSheet:'',//检验单号
                            //受血者abo血型
                            bloodType:'',
                            //受血者rhd血型
                            rhd:'',
                            bloodNumber:'',//血液编号
                            bloodSampleNumber:'',//患者血样编号
                            //供血者abo血型
                            aboBloodType:'',
                            //供血者rhd血型
                            rhBloodType:'',
                            //供血者血液成分
                            bloodComponent:'',
                            dispenseMethod:'',//配血方法
                            dispenseRegister:'',
                            dispenseRegisterNumber:'',
                            dispenseRegisterTime:'',
                            statue:'',//状态
                            dispenseTime:'',
                            dispensePeople:'',
                            dispensePeopleNumber:'',
                            reviewerName:'',
                            reviewerNumber:'',
                            reviewTime:'',
                            bloodSampleNumber:''
                        },

                        //表格信息
                        tableData: [],
                        aboTypeList:[],
                        rhTypeList:[],
                        //blood_information表中的信息
                        bloodInformationData:[],
                        //配血方法
                        dispenseMethodsList:[],
                        //配血结果
                        dispenseResultsList:[],
                        //血液规格列表
                        bloodSizeList:[],
                        //新增样本信息
                        addForm: {
                            number: '',
                            medicalRecordNumber: '',
                            patientId:'',
                            bloodSampleId:'',
                            bloodTestId:'',
                            //供血者abo血型
                            aboBloodType:'',
                            //供血者rhd血型
                            rhBloodType:'',
                            bloodNumber:'',
                            name: '',
                            //受血者abo血型
                            bloodType:'',
                            //受血者rhd血型
                            rhd:'',
                            bloodSampleNumber: '',
                            bloodBagNumber: '',
                            dispenseMethod: '',
                            inspectionSheet:'',
                            dispenseRegister:'',
                            dispenseRegisterNumber:'',
                            dispenseRegisterTime:'',
                            statue:'',
                            dispenseTime:'',
                            dispensePeople:'',
                            dispensePeopleNumber:'',
                            mainSideResult:'',
                            primarySideResult:'',
                            cost:'',
                            reviewerName:'',
                            reviewerNumber:'',
                            reviewTime:'',
                            bloodComponent:'',
                            specification:'',
                            inboundAmount:'',
                            bloodLocation:'',
                            bloodAmount:''
                        },
                        //最佳更换血液
                        changeBloodForm:{
                            bloodId:'',//血液ID
                            bloodNumber:'',//血液样本编号
                            bloodComponent:'',//血液成分
                            aboBloodType:'',
                            rhBloodType:'',
                            bloodCount:'',//规格/血量
                            failureTime:'',//失效时间
                            collectTime:'',
                            bloodSource:'',
                            state:'',
                            inboundAmount:'',
                            bloodLocation:'',
                            bloodAmount:''
                        },

                        //新增样本表单验证
                        addFormRules: {
                            number: [
                                { required: true, message: '请输入配血单号', trigger: 'blur' },
                            ],
                            medicalRecordNumber: [
                                { required: true, message: '请输入病历号', trigger: 'blur' },
                            ],
                            name: [
                                {
                                    required : true,
                                    message : '患者姓名不能为空',
                                    trigger : 'blur',
                                },{
                                    validator : checkName,
                                    trigger : 'blur',
                                }
                            ],
                            bloodSampleNumber: [
                                { required: true, message: '请输入患者血样编号编号', trigger: 'blur' },
                            ],
                            bloodNumber: [
                                { required: true, message: '请输入血液编号', trigger: 'blur' },
                            ],
                            dispenseMethod: [
                                { required: true, message: '请输入配血方法', trigger: 'blur' },
                            ],
                            inspectionSheet: [
                                { required: true, message: '请输入检验单号', trigger: 'blur' },
                            ],
                            dispenseRegister: [
                                { required: true,
                                    message: '请输入配血基本信息登记人',
                                    trigger: 'blur'
                                }
                                ,{
                                    validator : checkName,
                                    trigger : 'blur',
                                }
                            ],
                            dispenseRegisterNumber: [
                                { required: true, message: '请输入配血基本信息登记人工号', trigger: 'blur' },
                            ],
                            dispenseRegisterTime: [
                                { required: true,type:'datetime', message: '请输入配血基本信息登记时间', trigger: 'change' },
                            ],
                            statue: [
                                { required: true, message: '请选择配血状态', trigger: 'change' },
                            ],
                            dispenseTime: [
                                { required: true,type:'date', message: '请输入配血日期', trigger: 'change' },
                            ],
                            dispensePeople: [
                                { required: true,
                                    message: '请输入配血人',
                                    trigger: 'blur'
                                }, {
                                    validator : checkName,
                                    trigger : 'blur',
                                }
                            ],
                            dispensePeopleNumber: [
                                { required: true, message: '请输入配血人工号', trigger: 'blur' },
                            ],
                            mainSideResult: [
                                { required: true, message: '请选择主侧结果', trigger: 'change' },
                            ],
                            primarySideResult: [
                                { required: true, message: '请选择次侧结果', trigger: 'change' },
                            ],
                            cost: [
                                { required: true, message: '请输入费用', trigger: 'blur' },
                            ],
                            reviewerName: [
                                { required: true, message: '请输入审核人', trigger: 'blur' },{
                                    validator : checkName,
                                    trigger : 'blur',
                                }
                            ],
                            reviewerNumber: [
                                { required: true, message: '请输审核人工号', trigger: 'blur' },
                            ],
                            reviewTime: [
                                { required: true,type:'datetime', message: '请输入审核时间', trigger: 'change' },
                            ],
                        }
                    }
                },
                computed: {
                    //false为没有查询条件，true为有查询条件
                    searchMode() {
                        if (this.searchSample.number == ""
                            &&this.searchSample.medicalRecordNumber == ""
                            &&this.searchSample.inspectionSheet == ""
                            &&this.searchSample.name == ""
                            &&this.searchSample.bloodType == ""
                            &&this.searchSample.rhd == ""
                            &&this.searchSample.bloodSampleNumber == ""
                            &&this.searchSample.bloodNumber == ""
                            &&this.searchSample.aboBloodType == ""
                            &&this.searchSample.rhBloodType == ""
                            &&this.searchSample.dispenseMethod == ""
                            &&this.searchSample.dispenseRegister == ""
                            &&this.searchSample.dispenseRegisterNumber == ""
                            &&this.searchSample.dispenseRegisterTime == ""
                            &&this.searchSample.dispensePeople == ""
                            &&this.searchSample.dispensePeopleNumber == ""
                            &&this.searchSample.dispenseTime == ""
                            &&this.searchSample.reviewerNumber == ""
                            &&this.searchSample.reviewerName == ""
                            &&this.searchSample.reviewTime == ""
                            &&this.searchSample.statue == "")
                            return false
                        else
                            return true
                    },
                    bloodInformationMode(){
                        if (this.searchBloodInformation.aboBloodType == ""
                            &&this.searchBloodInformation.rhBloodType == ""&&this.searchBloodInformation.state == ""&&this.searchBloodInformation.bloodComponent=="")
                            return false
                        else
                            return true
                    }
                },

                watch: {
                    //监听搜索，条件搜索到无条件搜索，current变为1，反之依然
                    'searchMode': function (newVal, oldVal) {
                        this.currentChanged = true
                    },
                    //搜素条件改变时，cunrrent也要变为1
                    'searchSample': {
                        deep: true,
                        handler(newVal, oldVal) {
                            this.currentChanged = true
                        }
                    }
                },

                methods: {
                    handleSizeChange(val) {
                        this.pageSize = val
                        this.fetchPageData(this.current, this.pageSize)
                    },
                    //获得当前用户信息
                    getUser(){
                        this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                        return this.user;

                    },
                    //时间格式化
                    formatDate(row, column) {
                        // 获取单元格数据
                        let data = row[column.property]
                        if(data == null) {
                            return null
                        }
                        let dt = new Date(data)
                        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
                    },
                    //获得血液状态信息
                    queryBloodInformationState(){
                        axios({
                            url: '/state/normal/queryBloodInformationState',
                            method: 'post',
                        }).then(res => {
                            this.bloodStateList=res.data.data
                        })
                    },
                    // 将血液状态转成文字
                    getBloodInformationState(code){
                        for (var i = 0; i < this.bloodStateList.length; i++) {
                            if (this.bloodStateList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodStateList[i].state;
                            }
                        }
                    },
                    //获得abo血型信息
                    queryAboType(){
                        axios({
                            url: '/aboType/normal/queryAboType',
                            method: 'post',
                        }).then(res => {
                            this.aboTypeList=res.data.data
                        })
                    },
                    // 将表格中abo血型的code转换成name
                    getAbo(code){
                        for (var i = 0; i < this.aboTypeList.length; i++) {
                            if (this.aboTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                this.tableData.bloodType=this.aboTypeList[i].name;
                                return this.tableData.bloodType;
                            }
                        }
                    },
                    //获得Rh血型信息
                    queryRhType(){
                        axios({
                            url: '/rhType/normal/queryRhType',
                            method: 'post',
                        }).then(res => {
                            this.rhTypeList=res.data.data
                        })
                    },
                    // 将表格中rh血型的code转换成name
                    getRh(code){
                        for (var i = 0; i < this.rhTypeList.length; i++) {
                            if (this.rhTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.rhTypeList[i].name;
                            }
                        }
                    },
                    //获取配血状态
                    queryBloodDispenseStates(){
                        axios({
                            method: "get",
                            url: "/bloodDispenseStates/normal/queryBloodDispenseStates",
                        }).then(res => {
                            this.dispenseStatesList=res.data.data
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '获取数据失败',
                            })
                        })
                    },
                    getDispenseState(code){
                        for (var i = 0; i < this.dispenseStatesList.length; i++) {
                            if (this.dispenseStatesList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.dispenseStatesList[i].name;
                            }
                        }
                    },
                    //查询血液成分
                    queryBloodComposition(){
                        axios({
                            method: "get",
                            url: "/bloodComposition/normal/queryBloodComposition",
                        }).then(res => {
                            this.bloodCompositionList=res.data.data
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '获取数据失败',
                            })
                        })
                    },
                    getBloodComposition(code){
                        for (var i = 0; i < this.bloodCompositionList.length; i++) {
                            if (this.bloodCompositionList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodCompositionList[i].composition;
                            }
                        }
                    },

                    //获取配血结果下拉选项
                    queryDispenseResults(){
                        axios({
                            method: "get",
                            url: "/dispenseResults/normal/queryDispenseResults",
                        }).then(res => {
                            this.dispenseResultsList=res.data.data
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '获取数据失败',
                            })
                        })
                    },
                    getDispenseResult(code){
                        for (var i = 0; i < this.dispenseResultsList.length; i++) {
                            if (this.dispenseResultsList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.dispenseResultsList[i].name;
                            }
                        }
                    },
                    //血液规格列表
                    queryBloodSize(){
                        axios({
                            method: "get",
                            url: "/bloodSize/normal/queryBloodSize",
                        }).then(res => {
                            this.bloodSizeList=res.data.data
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '获取数据失败',
                            })
                        })
                    },
                    //血液规格字典转换
                    getBloodSize(code){
                        for (var i = 0; i < this.bloodSizeList.length; i++) {
                            if (this.bloodSizeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodSizeList[i].size;
                            }
                        }
                    },
                    //获取配血方法下拉选项
                    queryDispenseMethods(){
                        axios({
                            method: "get",
                            url: "/dispenseMethods/normal/queryDispenseMethods",
                        }).then(res => {
                            this.dispenseMethodsList=res.data.data
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '获取数据失败',
                            })
                        })
                    },
                    //配血方法
                    getDispenseMethod(code){
                        for (var i = 0; i < this.dispenseMethodsList.length; i++) {
                            if (this.dispenseMethodsList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.dispenseMethodsList[i].name;
                            }
                        }
                    },
                    // 配血费用
                    getDispenseCost(code){
                        for (var i = 0; i < this.dispenseMethodsList.length; i++) {
                            if (this.dispenseMethodsList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.dispenseMethodsList[i].cost;
                            }
                        }
                    },
                    //输入检验单号回填患者病历号和姓名
                    getInformation(){
                        // alert("324")
                        axios({
                            url: '/bloodDispense/normal/getReturnTestInformation',
                            method: 'post',
                            data: this.addForm
                        }).then(res => {
                            this.addForm.medicalRecordNumber=res.data.data.medicalRecordNumber
                            this.addForm.name=res.data.data.name
                            this.addForm.bloodType=this.getAbo(res.data.data.bloodType)
                            this.addForm.rhd=this.getRh(res.data.data.rhd)
                            this.addForm.bloodSampleNumber=res.data.data.bloodSampleNumber
                        }).catch(err => {
                            this.$notify.warning({
                                title: '错误',
                                message: '检验单号/患者血样不存在,请重新输入！！！',
                            })
                        })
                    },
                    //根据配血方法回填配血费用
                    returnDispenseCost(){
                        axios({
                            url: '/dispenseMethods/normal/getDispenseCost',
                            method: 'get',
                            params:{
                                dispenseMethod:this.addForm.dispenseMethod
                            }
                        }).then(res => {
                            this.addForm.cost=res.data.data.code
                            console.log(res.data+"图已经回家结婚")
                        })
                    },

                    //配血信息分页查询，显示在table中
                    fetchPageData(current,limit) {
                        axios({
                            method: "get",
                            url: "/bloodDispense/normal/listByPage",
                            params: {
                                currentPage: this.current,
                                pageSize: this.pageSize
                            }
                        }).then(res => {
                            if (res.status == '200') {
                                this.tableData = res.data.data;
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                            } else {
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                                this.$notify({
                                    tile: '警告',
                                    message: '获取分页服务内部错误',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '获取分页数据失败',
                            })
                        })
                    },

                    //点击页码
                    handleCurrentChange: function (val) {
                        this.current = val;
                        if (!this.searchMode)
                            this.fetchPageData(this.current, this.pageSize)
                        else
                            this.search()
                    },

                    //根据查询条件查询交叉配血信息
                    search() {
                        //基本信息登记时间
                        let dispenseRegisterTime = this.searchSample.dispenseRegisterTime
                        for (let i = 0; i < dispenseRegisterTime.length; i++) {
                            if(dispenseRegisterTime[i] instanceof Date)
                                dispenseRegisterTime[i] = dispenseRegisterTime[i].format("yyyy-MM-dd HH:MM:ss")
                        }
                        let startRegisterTime = dispenseRegisterTime[0]
                        let endRegisterTime = dispenseRegisterTime[1]
                        //配血时间
                        let dispenseTime = this.searchSample.dispenseTime
                        for (let i = 0; i < dispenseTime.length; i++) {
                            if(dispenseTime[i] instanceof Date)
                                dispenseTime[i] = dispenseTime[i].format("yyyy-MM-dd HH:MM:ss")
                        }
                        let startDispenseTime = dispenseTime[0]
                        let endDispenseTime = dispenseTime[1]
                        //审核时间
                        let reviewTime = this.searchSample.reviewTime
                        for (let i = 0; i < reviewTime.length; i++) {
                            if(reviewTime[i] instanceof Date)
                                reviewTime[i] = reviewTime[i].format("yyyy-MM-dd HH:MM:ss")
                        }
                        let startReviewTime = reviewTime[0]
                        let endReviewTime = reviewTime[1]

                        if (this.currentChanged) {
                            this.current = 1
                            this.currentChanged = false
                        }
                        if (!this.searchMode) {
                            this.fetchPageData(this.current, this.pageSize)
                        } else {
                            axios({
                                url: '/bloodDispense/normal/search',
                                method: 'get',
                                params: {
                                    number: this.searchSample.number,
                                    inspectionSheet:this.searchSample.inspectionSheet,
                                    medicalRecordNumber:this.searchSample.medicalRecordNumber,
                                    name:this.searchSample.name,
                                    bloodType:this.searchSample.bloodType,
                                    rhd:this.searchSample.rhd,
                                    bloodSampleNumber:this.searchSample.bloodSampleNumber,
                                    bloodNumber:this.searchSample.bloodNumber,
                                    aboBloodType:this.searchSample.aboBloodType,
                                    rhBloodType:this.searchSample.rhBloodType,
                                    dispenseMethod:this.searchSample.dispenseMethod,
                                    dispenseRegister:this.searchSample.dispenseRegister,
                                    dispenseRegisterNumber:this.searchSample.dispenseRegisterNumber,
                                    dispensePeople:this.searchSample.dispensePeople,
                                    dispensePeopleNumber:this.searchSample.dispensePeopleNumber,
                                    reviewerNumber:this.searchSample.reviewerNumber,
                                    reviewerName:this.searchSample.reviewerName,
                                    startRegisterTime: startRegisterTime != null ? startRegisterTime : '',
                                    endRegisterTime: endRegisterTime != null ? endRegisterTime : '',
                                    startDispenseTime: startDispenseTime != null ? startDispenseTime : '',
                                    endDispenseTime: endDispenseTime != null ? endDispenseTime : '',
                                    startReviewTime: startReviewTime != null ? startReviewTime : '',
                                    endReviewTime: endReviewTime != null ? endReviewTime : '',
                                    statue: this.searchSample.statue,
                                    currentPage: this.current,
                                    pageSize: this.pageSize
                                },
                            }).then(res => {
                                if (res.status == '200') {
                                    this.tableData = res.data.data;
                                    this.total = res.data.total;
                                    this.pages = res.data.pages;
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '搜索出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '搜索失败',
                                })
                            })
                        }
                    },
                    //清空搜索条件
                    clear() {
                        for (const key in this.searchSample)
                        {this.searchSample[key] = ""}
                        this.fetchPageData(this.current,this.limit)
                    },
                    //添加交叉配血信息
                    handleAdd(){
                        this.addForm.dispenseRegister=this.getUser().username;
                        this.addForm.dispenseRegisterNumber=this.getUser().jobnum;
                        this.dialogVisible=true;
                    },
                    addResult(){
                        if(JSON.parse(JSON.stringify(this.$refs.multipleTable.selection)).length==0){
                            this.$notify({
                                title: '温馨提示：',
                                message: '您未选中数据，请重新操作！！！',
                                type: 'warning'
                            });
                            return;
                        }
                        this.addForm=JSON.parse(JSON.stringify(this.$refs.multipleTable.selection[0]));
                        this.resultVisible=true;
                        this.addForm.dispensePeople=this.getUser().username;
                        this.addForm.dispensePeopleNumber=this.getUser().jobnum;
                    },

                    //配血结果登记保存
                    saveResult(){
                        axios({
                            url: '/bloodDispense/normal/addResult',
                            method: 'post',
                            // dataType:'json',
                            data: this.addForm
                        }).then(res => {
                            if (res.data.code == '200') {
                                this.cancel()
                                this.$notify({
                                    tile: '成功',
                                    message: '登记成功',
                                    type: 'success'
                                })
                                this.fetchPageData(this.current, this.limit)
                            }
                            else {
                                this.$notify({
                                    tile: '警告',
                                    message: '登记出错',
                                    type: 'warning'
                                })
                            }
                        }
                        ).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '登记失败',
                            })
                        })
                    },

                    //修改
                    handleEdit(index, row) {
                        //选中的样本
                        this.addForm = JSON.parse(JSON.stringify(row));
                        // this.addForm.bloodType=JSON.parse(JSON.stringify(row).bloodType)
                        this.editVisible = true;
                    },
                    // 配血信息登记
                    addSave(){
                        axios.post("/bloodDispense/normal/add",this.addForm).then(res=>{
                            if (res.data.code == '200') {
                                console.log(res.data)
                                this.cancel()
                                this.$notify({
                                    tile: '成功',
                                    message: '登记成功',
                                    type: 'success'
                                })
                                this.fetchPageData(this.current, this.limit)
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: res.data.msg,
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: "添加失败",
                            })
                        })
                    },
                    // 配血信息修改
                    editSave(){
                        axios.post("/bloodDispense/normal/update",this.addForm).then(res=>{
                            if (res.data.code == '200') {
                                this.cancel()
                                this.$notify({
                                    tile: '成功',
                                    message: '修改成功',
                                    type: 'success'
                                })
                                this.fetchPageData(this.current, this.limit)
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '修改出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '修改失败',
                            })
                        })
                    },
                    // 批量删除
                    batchDelete() {
                        if(JSON.parse(JSON.stringify(this.$refs.multipleTable.selection)).length==0){
                            this.$notify({
                                title: '温馨提示：',
                                message: '您未选中数据，请重新操作！！！',
                                type: 'warning'
                            });
                            return;
                        }
                        let checkArr = JSON.parse(JSON.stringify(this.$refs.multipleTable.selection));  // 存储了勾选到的数据
                        var ids=new Array()
                        for(var i=0;i<checkArr.length;i++){
                            ids[i]=checkArr[i].id;
                        }
                        // let data={ids:ids}
                        //批量删除
                        this.$confirm('确定删除这些数据吗, 是否继续?', '批量删除', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios({
                                url: '/bloodDispense/normal/batchDelete',
                                method: 'put',
                                dataType: 'json',
                                data:ids
                            }).then(res => {
                                if (res.data.code == '200') {
                                    this.$notify({
                                        tile: '温馨提示',
                                        message: '批量删除成功！！！',
                                        type: 'success'
                                    })
                                    this.fetchPageData(this.current, this.limit)
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '删除出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '删除失败',
                                })
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });
                    },

                    //删除
                    handleDelete: function(index,row) {
                        this.addForm=this.tableData[index]
                        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios({
                                url: '/bloodDispense/normal/deleteById',
                                method: 'post',
                                data: this.addForm,
                                //     { //需要携带的参数
                                //     //token: ""
                                //     id: parseInt(id)
                                // },
                            }).then(res => {
                                if (res.data.code == '200') {
                                    this.$notify({
                                        tile: '成功',
                                        message: '删除成功',
                                        type: 'success'
                                    })
                                    this.fetchPageData(this.current, this.limit)
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '删除出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '删除失败',
                                })
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });
                    },
                    //点击疑难配血
                    hardDispense(index, row){
                        //选中的样本
                        this.addForm = JSON.parse(JSON.stringify(row));
                        this.$confirm('此患者为疑难配血?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios({
                                url: '/bloodDispense/normal/hard',
                                method: 'post',
                                data: this.addForm
                            }).then(res => {
                                if (res.data.code == '200') {
                                    this.$notify({
                                        tile: '成功',
                                        message: '标记疑难配血成功',
                                        type: 'success'
                                    })
                                    this.fetchPageData(this.current, this.limit)
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '操作出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '操作失败',
                                })
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });

                    },
                    //确认更换血液
                    changeBlood(){
                        axios({
                            url: '/bloodDispense/normal/changeBlood',
                            method: 'post',
                            dataType:'json',
                            data: this.addForm
                        }).then(res => {
                                if (res.data.code == '200') {
                                    this.cancel()
                                    this.$notify({
                                        tile: '成功',
                                        message: res.data.msg,
                                        type: 'success'
                                    })
                                    this.fetchPageData(this.current, this.limit)
                                }
                                else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '登记出错',
                                        type: 'warning'
                                    })
                                }
                            }
                        )

                },
                    //换血按钮
                    chickChangeBlood(index, row){
                        //选中的样本
                        //选中的样本
                        this.addForm = JSON.parse(JSON.stringify(row));
                        // this.addForm.bloodType=JSON.parse(JSON.stringify(row).bloodType)
                        this.$confirm('更换配血血液样本?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios({
                                url: '/bloodDispense/normal/chickChangeBlood',
                                method: 'post',
                                data: this.addForm
                            }).then(res => {
                                if (res.data.code == '200') {
                                    this.changeBloodVisible=true;
                                    this.changeBloodForm = res.data.data;
                                }else {
                                    this.changeBloodVisible=false;
                                    this.$notify({
                                        tile: '警告',
                                        message: '暂无可更换的血液！！！',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '操作失败',
                                })
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });


                    },
                    //导出excel
                    exportExcel () {
//基本信息登记时间
                        let dispenseRegisterTime = this.searchSample.dispenseRegisterTime
                        for (let i = 0; i < dispenseRegisterTime.length; i++) {
                            if(dispenseRegisterTime[i] instanceof Date)
                                dispenseRegisterTime[i] = dispenseRegisterTime[i].format("yyyy-MM-dd HH:MM:ss")
                        }
                        //配血时间
                        let dispenseTime = this.searchSample.dispenseTime
                        for (let i = 0; i < dispenseTime.length; i++) {
                            if(dispenseTime[i] instanceof Date)
                                dispenseTime[i] = dispenseTime[i].format("yyyy-MM-dd HH:MM:ss")
                        }
                        //审核时间
                        let reviewTime = this.searchSample.reviewTime
                        for (let i = 0; i < reviewTime.length; i++) {
                            if(reviewTime[i] instanceof Date)
                                reviewTime[i] = reviewTime[i].format("yyyy-MM-dd HH:MM:ss")
                        }

                        if (this.currentChanged) {
                            this.current = 1
                            this.currentChanged = false
                        }
                        let number=this.searchSample.number
                        let inspectionSheet=this.searchSample.inspectionSheet
                        let medicalRecordNumber=this.searchSample.medicalRecordNumber
                        let name=this.searchSample.name
                        let bloodType=this.searchSample.bloodType
                        let rhd=this.searchSample.rhd
                        let bloodSampleNumber=this.searchSample.bloodSampleNumber
                        let bloodNumber=this.searchSample.bloodNumber
                        let aboBloodType=this.searchSample.aboBloodType
                        let rhBloodType=this.searchSample.rhBloodType
                        let dispenseMethod=this.searchSample.dispenseMethod
                        let dispenseRegister=this.searchSample.dispenseRegister
                        let dispenseRegisterNumber=this.searchSample.dispenseRegisterNumber
                        let dispensePeople=this.searchSample.dispensePeople
                        let dispensePeopleNumber=this.searchSample.dispensePeopleNumber
                        let reviewerNumber=this.searchSample.reviewerNumber
                        let reviewerName=this.searchSample.reviewerName
                        let startRegisterTime= dispenseRegisterTime[0] != null ? startRegisterTime : ''
                        let endRegisterTime=dispenseRegisterTime[1]!= null ? endRegisterTime : ''
                        let startDispenseTime=dispenseTime[0] != null ? startDispenseTime : ''
                        let endDispenseTime=dispenseTime[1] != null ? endDispenseTime : ''
                        let startReviewTime=reviewTime[0]!= null ? startReviewTime : ''
                        let endReviewTime=reviewTime[1]!= null ? endReviewTime : ''
                        let statue=this.searchSample.statue
                            // 创建a标签元素
                        const a = document.createElement('a')
                        a.href = 'http://localhost:8080/bloodDispense/normal/downloadExcel?' +
                            'number=' + number +
                            '&inspectionSheet=' + inspectionSheet +
                            '&medicalRecordNumber=' + medicalRecordNumber +
                            '&name=' + name +
                            '&bloodType=' + bloodType +
                            '&rhd=' + rhd +
                            '&bloodSampleNumber=' + bloodSampleNumber +
                            '&bloodNumber=' + bloodNumber +
                            '&aboBloodType=' + aboBloodType +
                            '&rhBloodType=' + rhBloodType +
                            '&dispenseMethod=' + dispenseMethod +
                            '&dispenseRegister=' + dispenseRegister +
                            '&dispenseRegisterNumber=' + dispenseRegisterNumber +
                            '&dispensePeople=' + dispensePeople +
                            '&dispensePeopleNumber=' + dispensePeopleNumber +
                            '&reviewerNumber=' + reviewerNumber +
                            '&reviewerName=' + reviewerName +
                            '&startRegisterTime=' + startRegisterTime +
                            '&endRegisterTime=' + endRegisterTime +
                            '&startDispenseTime=' + startDispenseTime +
                            '&endDispenseTime=' + endDispenseTime +
                            '&startReviewTime=' + startReviewTime +
                            '&endReviewTime=' + endReviewTime +
                            '&statue=' + statue
                        console.log(a.href)
                        a.click()
                    },
                    //取消
                    cancel() {
                        this.addForm.number=''
                        this.addForm.medicalRecordNumber=''
                        this.addForm.patientId=''
                        this.addForm.bloodSampleId=''
                        this.addForm.bloodTestId=''
                        this.addForm.aboBloodType=''
                        this.addForm.rhBloodType=''
                        this.addForm.bloodNumber=''
                        this.addForm.name=''
                        this.addForm.bloodType=''
                        this.addForm.rhd=''
                        this.addForm.bloodSampleNumber=''
                        this.addForm.bloodBagNumber=''
                        this.addForm.dispenseMethod=''
                        this.addForm.inspectionSheet=''
                        this.addForm.dispenseRegister=''
                        this.addForm.dispenseRegisterNumber=''
                        this.addForm.dispenseRegisterTime=''
                        this.addForm.statue=''
                        this.addForm.dispenseTime=''
                        this.addForm.dispensePeople=''
                        this.addForm.dispensePeopleNumber=''
                        this.addForm.mainSideResult=''
                        this.addForm.primarySideResult=''
                        this.addForm.cost=''
                        this.addForm.reviewerName=''
                        this.addForm.reviewerNumber=''
                        this.addForm.reviewTime=''
                        this.addForm.bloodComponent=''
                        this.changeBloodForm.bloodId=''
                        this.changeBloodForm.bloodNumber=''
                        this.changeBloodForm.bloodComponent=''
                        this.changeBloodForm.aboBloodType=''
                        this.changeBloodForm.rhBloodType=''
                        this.changeBloodForm.bloodCount=''
                        this.changeBloodForm.failureTime=''
                        this.changeBloodForm.state=''
                        this.reviewVisible = false
                        this.dialogVisible = false
                        this.resultVisible = false
                        this.editVisible = false
                        this.changeBloodVisible=false
                    },

                },
                mounted() {
                    this.fetchPageData(this.current, this.limit)
                    // this.getPageBloodInformation(this.bloodCurrent, this.limit)
                    this.queryDispenseMethods()
                    this.queryDispenseResults()
                    this.queryBloodDispenseStates()
                    this.queryAboType()
                    this.queryRhType()
                    this.queryBloodComposition()
                    this.queryBloodInformationState()
                    this.queryBloodSize()

                }
            });
        }
    )()
</script>

</body>

</html>